<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript 面试题 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/44.3b491aef.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/125.4e36fe37.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/16.dec928ab.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/42.9f41aa47.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/47.476e85c9.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/54.83f12d1e.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/73.47155429.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/96.2b1e8485.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link router-link-active">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link router-link-active">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/exam/" aria-current="page" class="sidebar-link">介绍</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>面试相关</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/exam/resume-ryf.html" class="sidebar-link">如何写一份有效的技术简历？</a></li><li><a href="/docs/exam/2020-interview-ms.html" class="sidebar-link">2020 年前端面试提纲</a></li><li><a href="/docs/exam/html-css.html" class="sidebar-link">HTML&amp;CSS 面试题</a></li><li><a href="/docs/exam/javascript.html" aria-current="page" class="active sidebar-link">JavaScript 面试题</a></li><li><a href="/docs/exam/vue.html" class="sidebar-link">Vue 面试题</a></li><li><a href="/docs/exam/actual-interview.html" class="sidebar-link">开放性题目</a></li><li><a href="/docs/exam/expand.html" class="sidebar-link">前端相关拓展题</a></li><li><a href="/docs/exam/webpack-inter-qu.html" class="sidebar-link">关于 webpack 的面试题总结</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>文摘</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/exam/need-happy.html" class="sidebar-link">一个人需要多少土地</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>JavaScript 面试题</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/exam/javascript.html#_0-基础" class="synopsis-link">0. 基础</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_1-必考-es6-语法知道哪些-分别怎么用" class="synopsis-link">1. 必考：ES6 语法知道哪些，分别怎么用？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_2-必考-promise、promise-all、promise-race-分别怎么用" class="synopsis-link">2. 必考 Promise、Promise.all、Promise.race 分别怎么用？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_3-必考-手写函数防抖和函数节流" class="synopsis-link">3. 必考：手写函数防抖和函数节流</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_4-必考-手写ajax" class="synopsis-link">4. 必考：手写AJAX</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_5-必考-这段代码里的-this-是什么" class="synopsis-link">5. 必考：这段代码里的 this 是什么？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_6-必考-闭包-立即执行函数是什么" class="synopsis-link">6. 必考：闭包/立即执行函数是什么？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_7-必考-什么是-jsonp-什么是-cors-什么是跨域" class="synopsis-link">7. 必考：什么是 JSONP，什么是 CORS，什么是跨域？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_8-常考-async-await-怎么用-如何捕获异常" class="synopsis-link">8. 常考：async/await 怎么用，如何捕获异常？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_9-常考-如何实现深拷贝" class="synopsis-link">9. 常考：如何实现深拷贝？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_10-常考-如何用正则实现-trim" class="synopsis-link">10. 常考：如何用正则实现 trim()？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_11-常考-不用-class-如何实现继承-用-class-又如何实现" class="synopsis-link">11. 常考：不用 class 如何实现继承？用 class 又如何实现？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_12-常考-如何实现数组去重" class="synopsis-link">12. 常考：如何实现数组去重？</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_13-放弃-相关题目-反着答" class="synopsis-link">13. 放弃：== 相关题目（反着答）</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_14-送命题-手写一个-promise" class="synopsis-link">14. 送命题：手写一个 Promise</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_15-必考-事件委托" class="synopsis-link">15. 必考：事件委托</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#_16-曾考-用-mouse-事件写一个可拖曳的-div" class="synopsis-link">16. 曾考：用 mouse 事件写一个可拖曳的 div</a></li><li class="synopsis-li"><a href="/docs/exam/javascript.html#冒泡排序" class="synopsis-link">冒泡排序</a></li></ul></div></div></div></div></div> <div class="theme-default-content content__default"><h2 id="_0-基础"><a href="#_0-基础" class="header-anchor">#</a> 0. 基础</h2> <p>八种数据类型</p> <div class="language-js extra-class"><pre class="language-js"><code>number string boolean symbol <span class="token keyword">null</span> <span class="token keyword">undefined</span> bigint
object
</code></pre></div><p>五个 false 值</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">null</span>、<span class="token number">NaN</span>、<span class="token keyword">undefined</span>、<span class="token string">''</span>、<span class="token number">0</span>
</code></pre></div><h2 id="_1-必考-es6-语法知道哪些-分别怎么用"><a href="#_1-必考-es6-语法知道哪些-分别怎么用" class="header-anchor">#</a> 1. 必考：ES6 语法知道哪些，分别怎么用？</h2> <p>带有继承的 class 构造函数</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Animal</span><span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token string">'身体'</span>
    <span class="token punctuation">}</span>
    <span class="token function">move</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'能动'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span><span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>body <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>body <span class="token operator">+</span> <span class="token string">'手脚'</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">18</span>
    <span class="token punctuation">}</span>
    <span class="token function">walk</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'直立行走'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'jack'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">)</span> <span class="token comment">//  {body: &quot;身体手脚&quot;, name: &quot;jack&quot;, age: 18}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">.</span>body<span class="token punctuation">)</span> <span class="token comment">// 身体手脚</span>
</code></pre></div><p>模块化(Module)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 导出</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> data
<span class="token comment">// 引入</span>
<span class="token keyword">import</span> data <span class="token keyword">from</span> <span class="token string">'./data.js'</span>
</code></pre></div><p>箭头函数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token punctuation">}</span>
<span class="token keyword">let</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token parameter">a</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a<span class="token operator">*</span><span class="token number">2</span> <span class="token punctuation">}</span>
<span class="token keyword">let</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token parameter">a</span> <span class="token operator">=&gt;</span> a<span class="token operator">*</span>a
</code></pre></div><p>函数默认参数</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">'jack'</span><span class="token punctuation">,</span> age <span class="token operator">=</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><p>模板字符串</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">你的名字是 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>one<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>two<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><p>数组解构赋值</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 批量赋值</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>one<span class="token punctuation">,</span> two<span class="token punctuation">,</span> three<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token comment">// 可以忽略某些值</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>one<span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token punctuation">,</span> four<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
<span class="token comment">// 赋值转换：注意第一个数组前加分号，防止不换行</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">3</span>
<span class="token punctuation">;</span><span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> a<span class="token punctuation">]</span>
</code></pre></div><p>对象解构赋值</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">'小明'</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span><span class="token string">'18'</span><span class="token punctuation">,</span>
    city<span class="token operator">:</span><span class="token string">'北京'</span>  
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span>name<span class="token punctuation">,</span>age<span class="token punctuation">,</span>city<span class="token punctuation">}</span> <span class="token operator">=</span> student
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>    <span class="token comment">// &quot;小明&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span>     <span class="token comment">// &quot;18&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>city<span class="token punctuation">)</span>    <span class="token comment">// &quot;北京&quot;</span>
</code></pre></div><p>剩余参数</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, 4, 5, 6]</span>
</code></pre></div><h2 id="_2-必考-promise、promise-all、promise-race-分别怎么用"><a href="#_2-必考-promise、promise-all、promise-race-分别怎么用" class="header-anchor">#</a> 2. 必考 <code>Promise</code>、<code>Promise.all</code>、<code>Promise.race</code> 分别怎么用？</h2> <p>Promise 使用</p> <p>创建一个函数fn，它有一个参数，不传默认值为 1，它 return 一个 <code>new Promise(function(resolve, reject){})</code> 函数，函数中有一个data，每次请求时 return 的 Promise 就会做一个判断，如果value的值为1，就让data的数据返回一个请求成功，如果value的值为2，就让data的数据返回一个请求失败。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter">value <span class="token operator">=</span> <span class="token number">1</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> data
        <span class="token keyword">if</span><span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            data <span class="token operator">=</span> <span class="token string">'请求成功'</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{</span>
            data <span class="token operator">=</span> <span class="token string">'请求失败'</span>
            <span class="token function">reject</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 成功请求案例</span>
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 请求成功</span>

<span class="token comment">// 失败请求案例</span>
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 请求失败</span>
</code></pre></div><p>还是以上面的案例为例，</p> <div class="language-js extra-class"><pre class="language-js"><code>Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 返回一个数组：[&quot;请求成功&quot;, &quot;请求成功&quot;]</span>

Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 返回第一个请求成功：&quot;请求成功&quot;</span>
</code></pre></div><p>共同点：它们失败都会返回第一个请求失败的数据</p> <h2 id="_3-必考-手写函数防抖和函数节流"><a href="#_3-必考-手写函数防抖和函数节流" class="header-anchor">#</a> 3. 必考：手写函数防抖和函数节流</h2> <p><strong>函数防抖</strong></p> <p>概念: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔以后，下一个任务才会执行。</p> <p>举例：以送外卖为例，在5秒内没有接到新单就开始送外卖，如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'开始送外卖'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
<span class="token keyword">let</span> timerId <span class="token operator">=</span> <span class="token keyword">null</span>
buttons<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">/* 判断外面时间 */</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>timerId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        window<span class="token punctuation">.</span><span class="token function">clearTimeout</span><span class="token punctuation">(</span>timerId<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'上一单还没超过5秒！'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    timerId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        timerId <span class="token operator">=</span> <span class="token keyword">null</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>函数节流</strong></p> <p>概念: 指定时间间隔内只会执行一次任务。</p> <p>举例：以技能释放CD为例，释放技能后在3秒内不能再次释放</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'释放技能'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
<span class="token keyword">let</span> cd <span class="token operator">=</span> <span class="token boolean">false</span>
buttons<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>cd<span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'技能正在冷却'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token comment">/* 点击时执行技能，并将 cd 变为 true，执行技能后过 3 秒 cd 才会再次变为 false。 */</span>
        <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        cd <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token keyword">let</span> timerId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            cd <span class="token operator">=</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_4-必考-手写ajax"><a href="#_4-必考-手写ajax" class="header-anchor">#</a> 4. 必考：手写AJAX</h2> <p>概念：AJAX就是用JS发请求和收响应。浏览器在 window 上加了一个 XMLHttpRequest 函数，用这个函数可以构造一个对象，用于发送请求接收响应。</p> <p>简化版：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
request<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'/xxx'</span><span class="token punctuation">)</span>
request<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'请求成功'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
request<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>完整版：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
request<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'http://xx.com/xxx'</span><span class="token punctuation">)</span>
request<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
request<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>status <span class="token operator">&gt;=</span> <span class="token number">200</span> <span class="token operator">&amp;&amp;</span> request<span class="token punctuation">.</span>status <span class="token operator">&lt;</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">let</span> string <span class="token operator">=</span> request<span class="token punctuation">.</span>responseText
            <span class="token keyword">let</span> object <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>string<span class="token punctuation">)</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'请求成功!'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>status <span class="token operator">&gt;=</span> <span class="token number">400</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'请求失败!'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_5-必考-这段代码里的-this-是什么"><a href="#_5-必考-这段代码里的-this-是什么" class="header-anchor">#</a> 5. 必考：这段代码里的 this 是什么？</h2> <p>常用的几种 this：</p> <ul><li><p><code>fn()</code>
this 是 window/global</p></li> <li><p><code>obj.fn()</code>
this 是 obj</p></li> <li><p><code>fn.call(xx) &amp; fn.apply(xx) &amp; fn.bind(xx)</code>
this 是 xx</p></li> <li><p><code>new Fn()</code>
this 是 新的对象</p></li> <li><p><code>fn = ()=&gt;{}</code>
this 是 箭头函数外面的 this</p></li></ul> <h2 id="_6-必考-闭包-立即执行函数是什么"><a href="#_6-必考-闭包-立即执行函数是什么" class="header-anchor">#</a> 6. 必考：闭包/立即执行函数是什么？</h2> <p><strong>概念</strong></p> <ul><li>函数使用了函数外的变量就叫做「闭包」。</li> <li>声明后立即调用的函数就叫做「立即执行函数」。</li></ul> <p>闭包案例</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">loga</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>立即执行函数案例</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">!</span><span class="token function">fucntion</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>立即执行函数 + 闭包</p> <p>假设我们在做一个游戏，在写其中关于「还剩几条命」的代码。但生命值不能让别人访问到，只能做生命加减操作，如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">!</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> lives <span class="token operator">=</span> <span class="token number">50</span>
    window<span class="token punctuation">.</span><span class="token function-variable function">奖励一条命</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        lives <span class="token operator">+=</span> <span class="token number">1</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lives<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    window<span class="token punctuation">.</span><span class="token function-variable function">死一条命</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        lives <span class="token operator">-=</span> <span class="token number">1</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lives<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

window<span class="token punctuation">.</span><span class="token function">奖励一条命</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 51</span>
window<span class="token punctuation">.</span><span class="token function">死一条命</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 50</span>
</code></pre></div><p>上面的代码就实现了 闭包 + 立即执行函数，我们只能通过调用 奖励一条命 或 死一条命 方法来控制 lives 变量，且由于函数在声明后立即调用，所以又构成了立即执行函数。</p> <p><strong>参考文章</strong></p> <p>知乎：https://zhuanlan.zhihu.com/p/22486908</p> <h2 id="_7-必考-什么是-jsonp-什么是-cors-什么是跨域"><a href="#_7-必考-什么是-jsonp-什么是-cors-什么是跨域" class="header-anchor">#</a> 7. 必考：什么是 JSONP，什么是 CORS，什么是跨域？</h2> <p><strong>什么是跨域？</strong></p> <p>域名 A 下的 JS 想通过 AJAX 请求域名 B 下的数据，就叫做跨域。</p> <p><strong>什么是 CORS？</strong></p> <p>CORS 就是用来解决跨域请求的一种方式，在响应头携带一个 Access-Control-Allow-Origin 字段，表明指定的域名可以访问该网站。</p> <p><strong>什么是 JSONP？</strong></p> <p>JSONP 就是由于当前浏览器不支持 CORS 或不兼容 CORS 等其他原因，这是我们需要跨域请求，就必须使用另外一种方式来跨域。于是我们就跨域请求一个 JS 文件，这个 JS 文件会执行一个回调，回调里面就有我们需要的数据，回调的名称是可以随机生成的，可以给一个随机数，然后把这个名字用一个名叫 callback 参数传给后台，后台会把这个函数再次返回给我们并执行。</p> <p>优点: 兼容IE，它可以跨域。</p> <p>缺点: 由于它是利用 script 标签获取，所以它只能发送 GET 请求，它不支持POST请求。</p> <h2 id="_8-常考-async-await-怎么用-如何捕获异常"><a href="#_8-常考-async-await-怎么用-如何捕获异常" class="header-anchor">#</a> 8. 常考：async/await 怎么用，如何捕获异常？</h2> <p>async/await 加捕获异常，如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> n <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// fn必须是一个返回 Promise 的函数</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'请求成功'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'请求错误，错误内容：'</span><span class="token operator">+</span>error<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>参考博客</strong></p> <ul><li><a href="http://www.ruanyifeng.com/blog/2015/05/async.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2015/05/async.html<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="_9-常考-如何实现深拷贝"><a href="#_9-常考-如何实现深拷贝" class="header-anchor">#</a> 9. 常考：如何实现深拷贝？</h2> <p>关键词：递归、判断类型、检查循环引用、深拷贝不可能拷贝原型。</p> <p>代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">deepCopy</span><span class="token punctuation">(</span><span class="token parameter">target</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
<span class="token keyword">let</span> copyed_objs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>    <span class="token comment">// 此数组解决了循环引用和相同引用的问题，它存放已经递归到的目标对象 </span>
    <span class="token keyword">function</span> <span class="token function">_deepCopy</span><span class="token punctuation">(</span><span class="token parameter">target</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> target <span class="token operator">!==</span> <span class="token string">'object'</span><span class="token punctuation">)</span><span class="token operator">||</span><span class="token operator">!</span>target<span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> target<span class="token punctuation">;</span><span class="token punctuation">}</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span>i<span class="token operator">&lt;</span>copyed_objs<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>copyed_objs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>target <span class="token operator">===</span> target<span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">return</span> copyed_objs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>copyTarget<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            obj <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>   <span class="token comment">// 处理target是数组的情况 </span>
        <span class="token punctuation">}</span>
        copyed_objs<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>target<span class="token operator">:</span>target<span class="token punctuation">,</span>copyTarget<span class="token operator">:</span>obj<span class="token punctuation">}</span><span class="token punctuation">)</span> 
        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span> 
            <span class="token keyword">if</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span><span class="token punctuation">;</span><span class="token punctuation">}</span> 
            obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">_deepCopy</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
        <span class="token keyword">return</span> obj<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> 
    <span class="token keyword">return</span> <span class="token function">_deepCopy</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>参考文章</strong></p> <ul><li><a href="https://juejin.im/post/6844903620190666759" target="_blank" rel="noopener noreferrer">JS深拷贝<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="_10-常考-如何用正则实现-trim"><a href="#_10-常考-如何用正则实现-trim" class="header-anchor">#</a> 10. 常考：如何用正则实现 trim()？</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">trim</span><span class="token punctuation">(</span><span class="token parameter">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> string<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><span class="token anchor function">^</span><span class="token charclass class-name">\s</span><span class="token quantifier number">+</span><span class="token alternation keyword">|</span><span class="token charclass class-name">\s</span><span class="token quantifier number">+</span><span class="token anchor function">$</span></span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_11-常考-不用-class-如何实现继承-用-class-又如何实现"><a href="#_11-常考-不用-class-如何实现继承-用-class-又如何实现" class="header-anchor">#</a> 11. 常考：不用 class 如何实现继承？用 class 又如何实现？</h2> <p><strong>不用 class 实现继承</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Animal</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">10</span>
<span class="token punctuation">}</span>
<span class="token class-name">Animal</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">move</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">222</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">Dog</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">Animal</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token number">20</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
f<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token class-name">Animal</span><span class="token punctuation">.</span>prototype
<span class="token class-name">Dog</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token class-name">Dog</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> Dog

Dog<span class="token punctuation">.</span><span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'汪汪汪'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
</code></pre></div><p><strong>用 class 实现继承</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Animal</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">10</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 注意: 必须先调用 super() 才能使用 &quot;this&quot;。</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token number">20</span>
    <span class="token punctuation">}</span>
    <span class="token function">say</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'汪汪汪'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>其中</p> <ul><li><code>extends</code>：表示继承该方法。</li> <li><code>constructor</code>：在一个类中只能有一个名为 <code>constructor</code> 的特殊方法。</li></ul> <h2 id="_12-常考-如何实现数组去重"><a href="#_12-常考-如何实现数组去重" class="header-anchor">#</a> 12. 常考：如何实现数组去重？</h2> <p>代码</p> <ol><li>使用 hash</li> <li>使用 <code>[...new Set(array)]</code></li> <li>WeakMap</li></ol> <p><strong>1、使用hash</strong></p> <p>原理：通过对象 key 的唯一性实现去重。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">unique</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token keyword">let</span> base <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>obj<span class="token punctuation">[</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            base<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
            obj<span class="token punctuation">[</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> base
<span class="token punctuation">}</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">unique</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><p><strong>2、使用 <code>Set(array)</code></strong></p> <p>利用 new Set(arr) 中的值都是唯一值的原理去重（返回一个伪数组）</p> <p>第一种方式是使用剩余参数将去重后的伪数组加到新的数组中，转为数组。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">]</span> 
<span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">]</span>
</code></pre></div><p>第二种方式是使用 <code>Array.from</code> 将去重后的伪数组转为数组</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> data <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_13-放弃-相关题目-反着答"><a href="#_13-放弃-相关题目-反着答" class="header-anchor">#</a> 13. 放弃：== 相关题目（反着答）</h2> <p>（举例）性价比极低，可放弃</p> <h2 id="_14-送命题-手写一个-promise"><a href="#_14-送命题-手写一个-promise" class="header-anchor">#</a> 14. 送命题：手写一个 Promise</h2> <p><s>我选择不做</s></p> <h2 id="_15-必考-事件委托"><a href="#_15-必考-事件委托" class="header-anchor">#</a> 15. 必考：事件委托</h2> <p>错误写法</p> <div class="language-js extra-class"><pre class="language-js"><code>ul<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'点击了li'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>正确写法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">xxx</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> eventType<span class="token punctuation">,</span> selector<span class="token punctuation">,</span> fn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventType<span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> el <span class="token operator">=</span> e<span class="token punctuation">.</span>target <span class="token comment">// 获取当前事件元素</span>
        <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token operator">!</span>el<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>element <span class="token operator">===</span> el<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                el <span class="token operator">=</span> <span class="token keyword">null</span>
                <span class="token keyword">break</span>
            <span class="token punctuation">}</span>
            el <span class="token operator">=</span> el<span class="token punctuation">.</span>parentNode
        <span class="token punctuation">}</span>
        el <span class="token operator">&amp;&amp;</span> <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> e<span class="token punctuation">,</span> el<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> element
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_16-曾考-用-mouse-事件写一个可拖曳的-div"><a href="#_16-曾考-用-mouse-事件写一个可拖曳的-div" class="header-anchor">#</a> 16. 曾考：用 mouse 事件写一个可拖曳的 div</h2> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>drag<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>css</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> dragging <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token keyword">let</span> position <span class="token operator">=</span> <span class="token keyword">null</span>

drag<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'mousedown'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    dragging <span class="token operator">=</span> <span class="token boolean">true</span>
    position <span class="token operator">=</span> <span class="token punctuation">[</span>e<span class="token punctuation">.</span>clientX<span class="token punctuation">,</span> e<span class="token punctuation">.</span>clientY<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'mousemove'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>dragging <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">}</span>
    <span class="token keyword">const</span> x <span class="token operator">=</span> e<span class="token punctuation">.</span>clientX
    <span class="token keyword">const</span> y <span class="token operator">=</span> e<span class="token punctuation">.</span>clientY
    <span class="token keyword">const</span> deltaX <span class="token operator">=</span> x <span class="token operator">-</span> position<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    <span class="token keyword">const</span> deltaY <span class="token operator">=</span> y <span class="token operator">-</span> position<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
    <span class="token keyword">const</span> left <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>drag<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> top <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>drag<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token comment">// console.log(btns.style.left, left, top)</span>
    drag<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> left <span class="token operator">+</span> deltaX <span class="token operator">+</span> <span class="token string">'px'</span>
    drag<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> top <span class="token operator">+</span> deltaY <span class="token operator">+</span> <span class="token string">'px'</span>
    position <span class="token operator">=</span> <span class="token punctuation">[</span>x<span class="token punctuation">,</span> y<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'mouseup'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    dragging <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="冒泡排序"><a href="#冒泡排序" class="header-anchor">#</a> 冒泡排序</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">bubbleSort</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> lengths <span class="token operator">=</span> array<span class="token punctuation">.</span>length 
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>lengths<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> j<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> j<span class="token operator">&lt;</span>lengths<span class="token operator">-</span><span class="token number">1</span><span class="token operator">-</span>i<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token operator">&lt;</span>array<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token punctuation">[</span>array<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">,</span> array<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>array<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> array<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> array
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-02-10 12:44</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/exam/html-css.html" class="prev">HTML&amp;CSS 面试题</a></span> <span class="next"><a href="/docs/exam/vue.html">Vue 面试题</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/44.3b491aef.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
